<template>
  <div>
  <h1 style="text-align: center;">教师行为分析系统</h1>
    <header style="height: 70px; background-color:#d0e0ed; border-bottom: 1px solid #dee2e6;">
      <div style="display: inline-block; width: 20%; height: 70px;">
        <h3 id="huanyin" style="margin: 0;line-height: 35px;">&nbsp;&nbsp;欢迎，{{ username }} 👋</h3>
        <h5 style="margin: 0;">&nbsp;&nbsp;&nbsp;&nbsp;ID：{{ account }}</h5>
      </div>
      <nav style="display: inline-block; width: 60%; text-align: center; vertical-align: top; line-height: 70px;">
        <router-link to="/home" class="about-link" style="margin: 0 30px; font-size: 22px; color: #222;">首页</router-link>
        <router-link to="/data" class="about-link" style="margin: 0 30px; font-size: 22px; color: #222;">数据分析</router-link>
        <router-link to="/picture" class="about-link" style="margin: 0 30px; font-size: 22px; color: #222;">可视化分析</router-link>
        <router-link to="/history" class="about-link" style="margin: 0 30px; font-size: 22px; color: #222;">历史记录</router-link>
      </nav>
      <div style="display: inline-block; height: 70px; float: right; vertical-align: top;">
        <button @click="logout" class="logout-btn" style="margin-top: 18px;">
          <i class="fas fa-sign-out-alt"></i> 退出登录
        </button>
      </div>
    </header>
    <!-- 头部和导航栏 -->
    <router-view
      :analyzedVideoUrl="$props.analyzedVideoUrl"
      :setAnalyzedVideoUrl="$props.setAnalyzedVideoUrl"
    />
  </div>
</template>

<script>
// import VideoUpload from './VideoUpload.vue'
// import VideoPlayer from './VideoPlayer.vue'
// import DataAnalysis from './DataAnalysis.vue'
// import DataExport from './DataExport.vue'
// import router from './router'

export default {
  name: 'DashBoard',
  // components: {
  //   VideoUpload,
  //   VideoPlayer,
  //   DataAnalysis,
  //   DataExport
  // },
  props: {
    username: String,
    account: String,
    userType: String,
    analyzedVideoUrl: String,
    setAnalyzedVideoUrl: Function
  },
  methods: {
    logout() {
      this.$emit('logout');
    }
  },
  mounted() {
    // 登录成功后
    localStorage.setItem('account', this.account);
  }
}
</script>